<!DOCTYPE html>

<!--
  EBI HTML5 slide template
  
  Adapted for EBI by Samuel Croset
  URL: http://code.google.com/p/ebi-slides-template/

  Original Authors for Google:
  	Luke Mahé (code)
	Marcin Wichary (code and design)
           
    Dominic Mazzoni (browser compatibility)
    Charles Chen (ChromeVox support)
	Original URL: http://code.google.com/p/html5slides/
-->

<html>
<head>
<title>Presentation EBI</title>

<meta charset='utf-8'>
<script
	src='http://ebi-slides-template.googlecode.com/svn/trunk/slides.js'></script>
</head>

<style>
/*
	Normal users: Leave it like that
	Advanced users: Your individual styles here, or just use inline styles if that’s what you want.
*/
</style>

<body style='display: none'>

	<section class='slides layout-regular template-ebi'>

		<!-- Your slides (<article>s) go here. Delete or comment out the
           slides below. -->


		<article class='biglogo'></article>

		<article>
			<h1>
				Title Goes Here Up <br> To Two Lines
			</h1>
			<p>
				John Smith <br> October 10, 2011
			</p>
		</article>

		<article>
			<p>This is a slide with just text. This is a slide with just
				text. This is a slide with just text. This is a slide with just
				text. This is a slide with just text. This is a slide with just
				text.</p>
			<p>There is more text just underneath.</p>
		</article>

		<article>
			<h3>Simple slide with header and text</h3>
			<p>This is a slide with just text. This is a slide with just
				text. This is a slide with just text. This is a slide with just
				text. This is a slide with just text. This is a slide with just
				text.</p>
			<p>
				There is more text just underneath with a
				<code>code sample: 5px</code>
				.
			</p>
		</article>

		<article class='smaller'>
			<h3>Simple slide with header and text (small font)</h3>
			<p>This is a slide with just text. This is a slide with just
				text. This is a slide with just text. This is a slide with just
				text. This is a slide with just text. This is a slide with just
				text.</p>
			<p>
				There is more text just underneath with a
				<code>code sample: 5px</code>
				.
			</p>
		</article>

		<article>
			<h3>Slide with bullet points and a longer title, just because we
				can make it longer</h3>
			<ul>
				<li>Use this template to create your presentation</li>
				<li>Use the provided color palette, box and arrow graphics, and
					chart styles</li>
				<li>Instructions are provided to assist you in using this
					presentation template effectively</li>
			</ul>
		</article>

		<article>
			<h3>Slide with bullet points that builds</h3>
			<ul class="build">
				<li>This is an example of a list</li>
				<li>The list items fade in</li>
				<li>Last one!</li>
			</ul>

			<div class="build">
				<p>Any element with child nodes can build.</p>
				<p>It doesn't have to be a list.</p>
			</div>
		</article>

		<article class='smaller'>
			<h3>Slide with bullet points (small font)</h3>
			<ul>
				<li>Use this template to create your presentation
				<li>Use the provided color palette, box and arrow graphics, and
					chart styles
				<li>Instructions are provided to assist you in using this
					presentation template effectively
			</ul>
		</article>

		<article>
			<h3>Slide with a table</h3>

			<table>
				<tr>
					<th>Name
					<th>Database
				<tr>
					<td>John Smith
					<td>Uniprot
				<tr>
					<td>Pierre Paul
					<td>Interpro
			</table>
		</article>

		<article class='smaller'>
			<h3>Slide with a table (smaller text)</h3>

			<table>
				<tr>
					<th>Name
					<th>Database
				<tr>
					<td>John Smith
					<td>Uniprot
				<tr>
					<td>Pierre Paul
					<td>Interpro
			</table>
		</article>

		<article>
			<h3>Styles</h3>
			<ul>
				<li><span class='red'>red stuff</span>
				<li><span class='blue'>blue stuff</span>
				<li><span class='green'>green stuff</span>
				<li><span class='yellow'>yellow stuff</span>
				<li><span class='black'>black stuff</span>
				<li><span class='white'>white stuff</span>
				<li><b>bold stuff</b> and <i>italic stuff</i>
			</ul>
		</article>

		<article>
			<h2>John's slide</h2>
		</article>

		<article>
			<h3>Slide with an image</h3>
			<p>
				<img style='height: 500px' src='images/example-graph.png'>
			</p>
			<div class='source'>Source: Google</div>
		</article>

		<article>
			<h3>Slide with an image (centered)</h3>
			<p>
				<img class='centered' style='height: 500px'
					src='images/example-graph.png'>
			</p>
			<div class='source'>Source: Google</div>
		</article>

		<article class='fill'>
			<h3>Image filling the slide (with optional header)</h3>
			<p>
				<img src='images/example-cat.jpg'>
			</p>
			<div class='source white'>Source: lion.com</div>
		</article>

		<article>
			<h3>This slide has some code</h3>
			<section>
				<pre>
&lt;script type='text/javascript'&gt;
  // Say hello world until the user starts questioning
  // the meaningfulness of their existence.
  function helloWorld(world) {
    for (var i = 42; --i &gt;= 0;) {
      alert('Hello ' + String(world));
    }
  }
&lt;/script&gt;
&lt;style&gt;
  p { color: pink }
  b { color: blue }
  u { color: 'umber' }
&lt;/style&gt;
</pre>
			</section>
		</article>

		<article class='smaller'>
			<h3>This slide has some code (small font)</h3>
			<section>
				<pre>
&lt;script type='text/javascript'&gt;
  // Say hello world until the user starts questioning
  // the meaningfulness of their existence.
  function helloWorld(world) {
    for (var i = 42; --i &gt;= 0;) {
      alert('Hello ' + String(world));
    }
  }
&lt;/script&gt;
&lt;style&gt;
  p { color: pink }
  b { color: blue }
  u { color: 'umber' }
&lt;/style&gt;
</pre>
			</section>
		</article>

		<article>
			<q> The best way to predict the future is to invent it. </q>
			<div class='author'>Alan Kay</div>
		</article>

		<article class='smaller'>
			<q> A distributed system is one in which the failure of a
				computer you didn’t even know existed can render your own computer
				unusable. </q>
			<div class='author'>Leslie Lamport</div>
		</article>

		<article class='nobackground'>
			<h3>A slide with an embed + title</h3>

			<iframe src='http://www.ebi.ac.uk/gxa/'></iframe>
		</article>

		<article class='nobackground'>
			<iframe src='http://www.ebi.ac.uk/gxa/'></iframe>
		</article>

		<article class='fill'>
			<h3>Full-slide embed with (optional) slide title on top</h3>
			<iframe src='http://www.ebi.ac.uk/gxa/'></iframe>
		</article>

		<article>
			<h3>Thank you!</h3>

			<ul>
				<li><a href='http://www.ebi.ac.uk/gxa/'>ebi.ac.uk</a>
			</ul>
		</article>

	</section>

</body>
</html>